<template>
  <view>
    <!-- 搜索区域 -->
    <view class="search_box">
      <uni-search-bar 
        cancelButton="none" 
        clearButton='auto' 
        :radius="100"
        placeholder="请输入搜索内容"
        @input="inputSeach"
        :focus="true"></uni-search-bar>
    </view>
    <!-- 搜索内容显示区域 -->
    <view class="search_title_box" >
      <view 
        class="searc_item" 
        v-for="(item,index) in seachArray" 
        :key="index" 
        @click="goToDetail(item.goods_id,'search_title')">
        <view class="searc_item_title">{{item.goods_name}}</view>
        <uni-icons type="arrowright" size="16"></uni-icons>
      </view>
      <!-- 搜索记录区域 -->
      <view class="search_record_box" v-if="seachArray.length === 0">
        <view class="record">
          <text class="record_title">搜索历史</text>
          <uni-icons type="trash" size="17" @click="delHistory"></uni-icons>
        </view>
        <!-- 搜索记录 -->
        <view class="record_boxs">
           <uni-tag 
             class="uni-tag" 
             :text="item" 
             type="default" 
             v-for="(item, i) in historyList" 
             :key="i"
             @click="goToDetail(item)" ></uni-tag>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        setTimeout:null,  // 关闭定时器所需要的标识
        value:'',
        seachArray:[], // 搜索结果数据
        historyArray:[] // 搜索历史记录数据
      };
    },
    onLoad() {
      this.historyArray = JSON.parse(uni.getStorageSync("Serach") || [])
    },
    methods:{
      inputSeach(e) {
        // 防抖处理
        clearTimeout(this.setTimeout)
        this.setTimeout = setTimeout(()=>{
          this.value = e
          this.getSerach()
        },800)
      },
      // 获取搜索列表的接口函数
      async getSerach() {
        if(this.value === '') {
          this.seachArray = []
          return
        }
        const {data:res} = await uni.$http.get('/api/public/v1/goods/qsearch?query=' + this.value)
        if (res.meta.status !== 200) return uni.$showMsg()
          this.seachArray = res.message
          this.severHistoyList()
      },
      // 跳转商品详情页
      goToDetail(id,type) {
        if(type === 'search_title') {
          uni.navigateTo({
            url:'/subpkg/goods_detail/goods_detail?goods_id='+ id
          })
        } else {
          uni.navigateTo({
            url:'/subpkg/goods_list/goods_list?query='+ id
          })
        }
       
      },
      // 清空历史记录
      delHistory() {
       uni.removeStorageSync("Serach")
       this.historyArray = []
      },
      // 保存搜索记录的方法
      severHistoyList() {
        // 历史记录去重
        let set = new Set(this.historyArray)
        // 先排己，在新增，目的就是让新值永远在第一位
        set.delete(this.value)
        set.add(this.value)
        // 然后把set对象转成数组
        this.historyArray = Array.from(set)
        // 本地持久化
        uni.setStorageSync('Serach',JSON.stringify(this.historyArray))
      }
    },
    // 使用计算属性翻转显示历史搜索
    computed:{
      historyList() {
        return [...this.historyArray.reverse()]
      }
    }
  }
</script>

<style lang="scss">
.search_box {
  position:sticky;
  top: 0;
  z-index: 999;
  background-color: #FF0000;
}

.search_title_box {
  padding: 0 5px;
  
  .searc_item {
    font-size: 12px;
    padding: 13px 0;
    border-bottom: 1px solid #efefef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .searc_item_title {
      // 文字不允许换行.单行显示
      white-space: nowrap;
      // 溢出影藏
      overflow: hidden;
      // 溢出部分让省略号代替
      text-overflow: ellipsis;
      margin-right: 3px;
    }
  }
}

.search_record_box {
  padding: 0 5px;
  .record {
    height: 80rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #efefef;
  }
  .record_title {
    font-size: 12px;
  }
  .record_boxs {
    display: flex;
    flex-wrap: wrap;

    .uni-tag {
      margin-top: 10px;
      margin-right: 5px;
    }
  }
}

</style>
